<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>试用bootstrap常用样式</title>
		<link rel="stylesheet" href="css/bootstrap.css" />
	</head>
	<body>
		<!--
			320 375 414 768 992 1200 1920

		-->
		<h1>h1. Bootstrap heading <small>我是一个副标题</small></h1>
		<h2>h2. Bootstrap heading</h2>
		<h3>h3. Bootstrap heading</h3>
		<h4>h4. Bootstrap heading</h4>
		<h5>h5. Bootstrap heading</h5>
		<h6>h6. Bootstrap heading</h6>
		<p class="lead">我是领头羊</p>
		<p>
			测试<mark>段落</mark><del>内容</del>
		</p>
		<style type="text/css">
			kbd{
				padding: 20px;
			}
		</style>
		<p>Lorem ipsum <code>var a = 10</code> <u>dolor sit amet,</u> <kbd>↑↑↓↓</kbd>consectetur <strong>adipisicing elit</strong>. Maxime nesciunt totam dolorum ipsa vitae iure voluptatibus pariatur distinctio molestias soluta suscipit deserunt vel! Doloribus eos adipisci beatae obcaecati provident placeat!</p>
		<style>
			pre{
				margin: 15px;
				background: #333333;
				color: white;
			}
		</style>
		<pre>
@charset 'utf-8'
body{
	margin: 0;
	padding: 0;
}
		</pre>
		<div class="table-responsive">
			<table class="table table-striped table-hover">
			<thead>
				<tr>
					<th>tableLorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae sit aut rem reiciendis fugit inventore aliquid dolore animi vel unde. Dolor quas dolores et sint esse unde nisi eum necessitatibus.</th>
				
					<th>tableLorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae sit aut rem reiciendis fugit inventore aliquid dolore animi vel unde. Dolor quas dolores et sint esse unde nisi eum necessitatibus.</th>
				
					<th>tableLorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae sit aut rem reiciendis fugit inventore aliquid dolore animi vel unde. Dolor quas dolores et sint esse unde nisi eum necessitatibus.</th>
				</tr>
			</thead>
			<tr>
				<td>item</td>
				<td>item</td>
				<td>item</td>
			</tr>
			<tr>
				<td>item</td>
				<td>item</td>
				<td>item</td>
			</tr>
			<tr>
				<td>item</td>
				<td>item</td>
				<td>item</td>
			</tr>
			
		</table>
		<form class="form-inline">
		  <div class="form-group">
		    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
		    <div class="input-group">
		      <div class="input-group-addon">$</div>
		      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
		      <div class="input-group-addon">.00</div>
		    </div>
		  </div>
		  <button type="submit" class="btn btn-primary">Transfer cash</button>
		</form>
		<span class="help-block">帮助帮助帮助帮助帮助帮助帮助帮助</span>
		<button class="btn btn-primary">普通按钮</button>
		<button class="btn btn-default">默认按钮</button>
		<button class="btn btn-danger">危险按钮</button>
		</div>
		
		<!--
			动画建议试用一下属性
			1.transform
			2.opacity
			3.color
		
			不会触发计算机重新排版
			
		-->
		<img src="img/fenmian.gif" alt="" class="img-thumbnail"/>
		<p class="bg-warning">
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam iusto deserunt tenetur autem magnam sapiente accusamus incidunt consectetur fugit dolor eum voluptates eligendi itaque pariatur officia asperiores nihil perspiciatis hic.
		</p>
	</body>
</html>
